<template>
  <div style="width: 100%;height:100%;padding:5px;">
    <rx-fit>
        <template #head>
          <div class="btnContainer" style="padding-top:6px;">
            <a-button @click="saveData"  type="primary" size="small"><SaveOutlined />{{i18n('list.saveData','保存数据')}}</a-button>
          </div>
        </template>
        <template #middle>
          <div class="BpmAtabpane">
            <rx-forms ref="rxForms"></rx-forms>
          </div>
        </template>
    </rx-fit>
    <!-- 流程实例日志 -->
    <bpm-inst-logs :instId="curInstId" v-model:logShow="logShow" />
    <!--流程实例消息-->
    <bpm-inst-msgs :instId="curInstId" v-model:msgShow="msgShow"/>
    <!--审批历史-->
    <bpm-history  :inst-id="curInstId" v-model:historyShow="historyShow" />
  </div>
</template>

<script>
  import {RxDialog,Util,RxFit} from '@lowcode/jpaas-base-lib';
  import BpmInstMsgs from "./BpmInstMsgs.vue"
  import BpmInstLogs from "./BpmInstLogs.vue";
  import BpmInstApi from '@/common/api/bpm/bpmInst'
  import FormPcApi from '@/common/api/form/FormPcApi'
  import {BpmImageView} from "@lowcode/jpaas-share-component";
  import RxForms from "../OpenDoc/RxForms.vue";
  import BpmHistory from "./bpmHistory.vue";
  import formBase from '../OpenDoc/js/formBase.js';
  import userUser from "@/stores/userUser";
  import { mapState } from 'pinia';
  export default {
    name: "BpmInstFormOperat",
    components:{
      RxDialog,
      RxFit,
      RxForms,
      BpmInstMsgs,
      BpmInstLogs,
      BpmImageView,
      BpmHistory,
    },
    computed:{
      ...mapState(userUser, ['user'])
    },
    mixins:[formBase],
    props:{
      instId:{
        type:String,
      },
      layerid: String,
      destroy:Function
    },
    data(){
      return {
        curInstId:this.instId,
        historyShow:false,
        logShow:false,
        msgShow:false,
        bpmInstDetail:{},
        actInstId:"",
        defId:"",

      }
    },
    created() {
      this.loadDetail();
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"BpmInstFormOperat",key);
      },
      loadDetail() {
        let self = this;
        if(!this.instId){
          this.curInstId=this.$route.params.instId;
        }
        BpmInstApi.getInstDetailForInterpose(this.curInstId).then(res => {
          self.bpmInstDetail = res;
          var curUser = self.user;
          self.actInstId = self.bpmInstDetail.bpmInst.actInstId;
          self.defId = self.bpmInstDetail.bpmInst.defId;
          let contextData = {
            instId: self.curInstId,
            defId: self.defId,
            tenantId: curUser.tenantId,
            tenantLabel: curUser.tenantLabel,
            opinionHistorys: res.bpmCheckHistories
          };

          self.$refs.rxForms.setData(res.formData.data, false, contextData);
        })
      },
      saveData(){
          var self_=this;
          this.$confirm({
              title: this.$ti18('rxMsa.tipsInfo','提示信息'),
              content: self_.i18n('msa.saveTips','确认保存表单数据吗?'),
              okText: this.$ti18('rxForm.ackBtn','确认'),
              cancelText: this.$ti18('rxForm.cancelBtn','取消'),
              zIndex:20000,
              onOk() {
                  var json=self_.$refs.rxForms.getData();
                  let appId=self_.bpmInstDetail.bpmInst.appId;
                  FormPcApi.saveFormDataDirect(json,appId).then(res=>{
                      Util.closeWindow(self_, 'ok');
                  });

              }
          });
      },
    }
  }
</script>

<style scoped>
.BpmAtabpane{
  height: calc(100% - 35px) !important;
}
  .btnContainer{
    padding: 2px 10px 2px 0px ;
    width: 100%;
    text-align: right;

  }
</style>
